<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">数据统计</a></el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- tabs标签 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户来源" name="first">
          <chart :options="option1" id="myChart"></chart>
        </el-tab-pane>
        <el-tab-pane label="数据统计" name="second">
        </el-tab-pane>
        <el-tab-pane label="数据统计" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="数据统计" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import { getReports } from '@/api'
import Vue from 'vue'
import ECharts from 'vue-echarts'
Vue.component('chart', ECharts)
export default {
  created () {
    this.initReports()
  },
  data () {
    return {
      activeName: 'first',
      option1: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {},
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  methods: {
    initReports () {
      getReports(1)
        .then(res => {
          console.log(res)
          // this.option = res.data
          this.option1.legend = res.data.legend
          this.option1.series = res.data.series
          this.option1.xAxis = res.data.xAxis
          this.option1.yAxis = res.data.yAxis
        })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}

</script>
<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #F5F5F5;
  height: 30px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 30px;
  margin-bottom: 15px;
}
</style>
